.form-card {
  .form {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 20px;
    padding-bottom: 40px;
    overflow: hidden;

    .form-item {
      position: relative;
      height: 190px;
      overflow: hidden;
      background: #f3f6fc;
      border-radius: 6px;

      img {
        width: 100%;
        height: 120px;
        border-style: none;
      }

      .text {
        width: 100%;
        height: 50px;
        margin-top: 12px;
        padding: 0 10px;
        color: #3d3d3d;
      }

      .text .number {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        color: #bfbfbf;
      }

      .arco-space-align-center {
        align-items: center;
      }

      .arco-space {
        display: inline-flex;
      }

      .arco-space-horizontal .arco-space-item {
        display: flex;
        align-items: center;
      }

      .arco-btn {
        border-radius: 6px;
      }

      .arco-btn-size-mini {
        border-radius: 4px;
      }

      .arco-btn-primary,
      .arco-btn-primary[type='button'],
      .arco-btn-primary[type='submit'] {
        color: #fff;
        background-color: rgb(22, 93, 255);
        border: 1px solid transparent;
      }
    }
  }
}

@media screen and (max-width: 1400px) {
  .form-card .form {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 1200px) {
  .form-card .form {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .form-card .form {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .form-card .form {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 576px) {
  .form-card .form {
    grid-template-columns: repeat(1, 1fr);
  }
}
